<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .dv{
            width: 70%;
            height: 400px;
        }
    </style>
<!--    1.引入js-->
    <script src="lib/echarts.min.js"></script>
</head>
<body>
<div>
<!--    2.图表显示位置-->
    <div class="dv" id="dv1"></div>
    <div class="dv" id="dv2"></div>
    <div class="dv" id="dv3"></div>
    <script>
        //折线图
        init1();
        //柱状图
        init2();
        //饼图
        init3();

<!--        3.编写js代码 -->
    function  init1(){
        //获取对应的标签 div
        var dv = document.getElementById('dv1');
        //完成Echarts初始化
        var chart = echarts.init(dv);
        //设置图表需要的数据
        var option = {
            title: {
                text: '折线图',
                subtext: '醒醒，看懂没！',
                textStyle:{
                    color:"green"
                }
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: { readOnly: false },
                    magicType: { type: ['line', 'bar'] },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'line'
                }
            ]
        };
        //设置数据到图表上
        chart.setOption(option);
    }
    function init2(){
        var dv=document.getElementById("dv2");
        var chart=echarts.init(dv);
        var option = {
            title: {
                text: '柱状图的瀑布类型',
                subtext: '醒醒，看懂没！',
                textStyle:{
                    color:"red"
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: function (params) {
                    var tar = params[1];
                    return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                splitLine: { show: false },
                data: ['Total', 'Rent', 'Utilities', 'Transportation', 'Meals', 'Other']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: 'Placeholder',
                    type: 'bar',
                    stack: 'Total',
                    itemStyle: {
                        borderColor: 'transparent',
                        color: 'transparent'
                    },
                    emphasis: {
                        itemStyle: {
                            borderColor: 'transparent',
                            color: 'transparent'
                        }
                    },
                    data: [0, 1700, 1400, 1200, 300, 0]
                },
                {
                    name: 'Life Cost',
                    type: 'bar',
                    stack: 'Total',
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    data: [2900, 1200, 300, 200, 900, 300]
                }
            ]
        };
        chart.setOption(option);
    }
    function init3(){
        var dv=document.getElementById("dv3");
        var chart=echarts.init(dv);
        var option = {
            title: {
                text: 'Referer of a Website',
                subtext: 'Fake Data',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 1048, name: 'Search Engine' },
                        { value: 735, name: 'Direct' },
                        { value: 580, name: 'Email' },
                        { value: 484, name: 'Union Ads' },
                        { value: 300, name: 'Video Ads' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        chart.setOption(option);
    }
    </script>
</div>
</body>
</html>